<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="./common/reset.css">
    <link rel="stylesheet" type="text/css" href="./common/common.css">
    <link rel="stylesheet" type="text/css" href="./pagination.css">
</head>
<style>
    .arr{
        height: 30px;
        width: 100px;
    }

</style>
<body>

<div class="page">
    <div><span id="mix"></span></div>
    <div class="M-box"></div>
    <ul>
        <li class="arr"></li>
        <li class="arr"></li>
        <li class="arr"></li>
        <li class="arr"></li>
        <li class="arr"></li>
    </ul>
</div>

<!--script-->
<script src="common/jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<script>
    var  ss=20;
    $('.M-box').pagination({
        total:100,
        showData:20,
        callback:function(api){
            $('#mix').html(
                    '<ul>'+
                    '<li class="arr">'+api.getCurrent()+'</li>'+
                    '<li class="arr">'+api.getCurrent()+'</li>'+
                    '<li class="arr">'+api.getCurrent()+'</li>'+
                    '<li class="arr">'+api.getCurrent()+'</li>'+
                    '<li class="arr">'+api.getCurrent()+'</li>'+
                    '</ul>'
            );
        }
    },function(api){    //初始化
        //document.getElementById("mix").innerHTML="1";
        $('#mix').html(
        '<ul>'+
        '<li class="arr">'+api.getCurrent()+'</li>'+
        '<li class="arr">'+api.getCurrent()+'</li>'+ 
        '<li class="arr">'+api.getCurrent()+'</li>'+
        '<li class="arr">'+api.getCurrent()+'</li>'+
        '<li class="arr">'+api.getCurrent()+'</li>'+
        '</ul>'
        );
    });
</script>
</body>
</html>